{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '示例页面:example/pages/index', '用户头像'])}
<style>
    .img-avatar {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        display: inline-block;
        position: relative;
        background-color: #f9fafb;
        color: #8b95a5;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        vertical-align: middle;
        text-align: center;
    }
    .img-avatar img {
        -webkit-border-radius: 50%;
        border-radius: 50%;
        vertical-align: bottom;
    }
    /* 尺寸 */
    .img-avatar-36,
    .img-avatar-36 img {
        width: 36px;
        height: 36px;
    }
    .img-avatar-36 {
        line-height: 36px;
    }
    .img-avatar-48,
    .img-avatar-48 img {
        width: 48px;
        height: 48px;
    }
    .img-avatar-48 {
        line-height: 48px;
    }
    .img-avatar-64,
    .img-avatar-64 img {
        width: 64px;
        height: 64px;
    }
    .img-avatar-64 {
        line-height: 64px;
    }
    .img-avatar-96,
    .img-avatar-96 img {
        width: 96px;
        height: 96px;
    }
    .img-avatar-96 {
        line-height: 96px;
    }
    .img-avatar-128,
    .img-avatar-128 img {
        width: 128px;
        height: 128px;
    }
    .img-avatar-128 {
        line-height: 128px;
    }
    /* 状态 */
    [class*='status-'] {
        position: relative;
        display: inline-block;
    }
    [class*='status-']::after {
        content: '';
        position: absolute;
        right: 7px;
        bottom: 0;
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 100%;
        border: 2px solid #fff;
        background-color: #33cabb;
    }
    [class*='status-'].img-avatar-36::after {
        right: 0px;
    }
    [class*='status-'].img-avatar-48::after {
        right: 4px;
    }
    [class*='status-'].img-avatar-96::after {
        right: 15px;
        width: 12px;
        height: 12px;
    }
    [class*='status-'].img-avatar-128::after {
        right: 20px;
        width: 16px;
        height: 16px;
    }
    .status-primary::after {
        background-color: var(--bs-primary);
    }
    .status-danger::after {
        background-color: var(--bs-danger);
    }
    .status-success::after {
        background-color: var(--bs-success);
    }
    .status-info::after {
        background-color: var(--bs-info);
    }
    .status-warning::after {
        background-color: var(--bs-warning);
    }
    .status-dark::after {
        background-color: var(--bs-dark);
    }
    /* 带文字 */
    .img-avatar-pill {
        width: auto;
        border-radius: 32px;
        color: #4d5259;
        text-transform: none;
        letter-spacing: 0;
        background-color: #f9fafb;
        display: -webkit-inline-box;
        display: inline-flex;
        -webkit-box-align: center;
        align-items: center;
    }
    .img-avatar-pill:hover {
        background-color: #f5f6f7;
    }
    .img-avatar-pill.img-avatar-36 {
        border-radius: 18px;
    }
    .img-avatar-pill.img-avatar-48 {
        border-radius: 24px;
    }
    .img-avatar-pill.img-avatar-96 {
        border-radius: 48px;
    }
    .img-avatar-pill.img-avatar-128 {
        border-radius: 64px;
    }
    .img-avatar-pill span {
        padding-right: 18px;
        padding-left: 8px;
    }
    .img-avatar-pill.img-avatar-36 span {
        padding-right: 14px;
    }
    .img-avatar-pill.img-avatar-48 span {
        padding-right: 24px;
    }
    .img-avatar-pill.img-avatar-96 span {
        padding-right: 32px;
        padding-left: 12px;
    }
    .img-avatar-pill.img-avatar-128 span {
        padding-right: 48px;
        padding-left: 12px;
    }
    /* 头像列表 */
    .img-avatar-list:not(.img-avatar-list-overlap) .img-avatar {
        margin: 2px;
    }
    /* 头像叠加 */
    .img-avatar-list-overlap .img-avatar {
        border: 2px solid #fff;
        -webkit-box-shadow: 0 0 25px rgba(0,0,0,0.2);
        box-shadow: 0 0 25px rgba(0,0,0,0.2);
        -webkit-transition: .15s linear;
        transition: .15s linear;
        cursor: pointer;
    }
    .img-avatar-list-overlap .img-avatar+.img-avatar {
        margin-left: -26px;
    }
    .img-avatar-list-overlap .img-avatar+.img-avatar-36 {
        margin-left: -18px;
    }
    .img-avatar-list-overlap .img-avatar+.img-avatar-48 {
        margin-left: -24px;
    }
    .img-avatar-list-overlap .img-avatar+.img-avatar-96 {
        margin-left: -48px;
    }
    .img-avatar-list-overlap .img-avatar+.img-avatar-128 {
        margin-left: -64px;
    }
    .img-avatar-list-overlap .img-avatar:hover+.img-avatar {
        margin-left: 0;
    }
    /* 更多用户 */
    .img-avatar-more span {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        color: rgba(255, 255, 255, 0.8);
        border-radius: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        -webkit-transition: 0.3s ease;
        transition: 0.3s ease;
    }
    .img-avatar-more:hover span {
        color: #fff;
        background-color: rgba(0,0,0,0.65);
    }
    [data-provide~="img-avatar-more"] ~ .img-avatar {
        display: none!important;
    }
    </style>

  <div class="row">
  <div class="col-md-12">
    <div class="card">
      <div class="card-body">
        
        <div class="row">
          <div class="col-md-6">
            <p><strong>基础</strong></p>
            <ul class="list-inline">
              <li class="list-inline-item">
                <p class="text-center">基本使用</p>
                <span class="img-avatar img-avatar-48">二娃</span>
                <img class="img-avatar img-avatar-48" src="{$xpConfig['web_static']}/example/images/users/avatar-2.png">
              </li>
  
              <li class="list-inline-item">
                <p class="text-center">带提示的</p>
                <span class="img-avatar img-avatar-48" data-toggle="tooltip" title="大力娃">大娃</span>
                <img class="img-avatar img-avatar-48" src="{$xpConfig['web_static']}/example/images/users/avatar-1.png" alt="..." data-toggle="tooltip" title="大力娃">
              </li>
  
              <li class="list-inline-item">
                <p class="text-center">带链接的</p>
                <a class="img-avatar img-avatar-48" href="#!">三娃</a>
                <a href="#!"><img class="img-avatar img-avatar-48" src="{$xpConfig['web_static']}/example/images/users/avatar-3.png"></a>
              </li>
            </ul>
          </div>          
          <div class="col-md-6">
            <p><strong>尺寸</strong></p>
            <p>可用的尺寸有: <code>img-avatar-36</code>，<code>img-avatar-48</code>，<code>img-avatar-64</code>，<code>img-avatar-96</code>，<code>img-avatar-128</code>。v4中默认不指定大小。</p>

            <span class="img-avatar img-avatar-36">36</span>
            <span class="img-avatar img-avatar-48">48</span>
            <span class="img-avatar img-avatar-64">64</span>
            <span class="img-avatar img-avatar-96">96</span>
            <span class="img-avatar img-avatar-128">128</span>
          </div>
        </div>
        
        <hr>
        
        <div class="row">
          <div class="col-md-6">
            <p><strong>状态</strong></p>
            <p>可用的状态值: <code>status-primary</code>, <code>status-success</code>, <code>status-info</code>, <code>status-warning</code>, <code>status-danger</code>, <code>status-dark</code>, <code>status-secondary</code>。</p>

            <span class="img-avatar-36 status-primary"><img class="img-avatar" src="{$xpConfig['web_static']}/example/images/users/avatar-3.png"></span>
            <span class="img-avatar-48 status-danger"><img class="img-avatar" src="{$xpConfig['web_static']}/example/images/users/avatar-4.png"></span>
            <span class="img-avatar-64 status-success"><img class="img-avatar" src="{$xpConfig['web_static']}/example/images/users/avatar-7.png"></span>
            <span class="img-avatar-64 status-info"><img class="img-avatar" src="{$xpConfig['web_static']}/example/images/users/avatar-5.png"></span>
            <span class="img-avatar-96 status-warning"><img class="img-avatar" src="{$xpConfig['web_static']}/example/images/users/avatar-4.png"></span>
            <span class="img-avatar-128 status-dark"><img class="img-avatar" src="{$xpConfig['web_static']}/example/images/users/avatar-6.png"></span>
          </div>
          <div class="col-md-6">
            <p><strong>带文字的头像</strong></p>

            <a class="img-avatar img-avatar-pill img-avatar-36" href="#!">
              <img src="{$xpConfig['web_static']}/example/images/users/avatar-1.png">
              <span>大娃 力大无穷</span>
            </a>

            <a class="img-avatar img-avatar-pill img-avatar-48" href="#!">
              <img src="{$xpConfig['web_static']}/example/images/users/avatar-2.png">
              <span>二娃 千里眼顺风耳</span>
            </a>
            
            <a class="img-avatar img-avatar-pill img-avatar-64" href="#!">
              <img src="{$xpConfig['web_static']}/example/images/users/avatar-3.png">
              <span>三娃 刀枪不入</span>
            </a>
            
            <br/> <br/>

            <a class="img-avatar img-avatar-pill img-avatar-96" href="#!">
              <img src="{$xpConfig['web_static']}/example/images/users/avatar-4.png">
              <span>四娃 喷火娃</span>
            </a>

            <a class="img-avatar img-avatar-pill img-avatar-128" href="#!">
              <img src="{$xpConfig['web_static']}/example/images/users/avatar-5.png">
              <span>五娃 喷水娃</span>
            </a>
          </div>
        </div>
        
        <hr/>
        
        <div class="row">
          <div class="col-md-6">
            <p><strong>头像列表</strong></p>
            <div class="img-avatar-list">
              <img class="img-avatar img-avatar-36" src="{$xpConfig['web_static']}/example/images/users/avatar-1.png">
              <img class="img-avatar img-avatar-36" src="{$xpConfig['web_static']}/example/images/users/avatar-2.png">
              <img class="img-avatar img-avatar-36" src="{$xpConfig['web_static']}/example/images/users/avatar-3.png">
              <img class="img-avatar img-avatar-36" src="{$xpConfig['web_static']}/example/images/users/avatar-4.png">
              <img class="img-avatar img-avatar-36" src="{$xpConfig['web_static']}/example/images/users/avatar-5.png">
              <img class="img-avatar img-avatar-36" src="{$xpConfig['web_static']}/example/images/users/avatar-6.png">
              <img class="img-avatar img-avatar-36" src="{$xpConfig['web_static']}/example/images/users/avatar-7.png">
            </div>
            <div class="img-avatar-list m-t-10">
              <img class="img-avatar img-avatar-48" src="{$xpConfig['web_static']}/example/images/users/avatar-1.png">
              <img class="img-avatar img-avatar-48" src="{$xpConfig['web_static']}/example/images/users/avatar-2.png">
              <img class="img-avatar img-avatar-48" src="{$xpConfig['web_static']}/example/images/users/avatar-3.png">
              <img class="img-avatar img-avatar-48" src="{$xpConfig['web_static']}/example/images/users/avatar-4.png">
              <img class="img-avatar img-avatar-48" src="{$xpConfig['web_static']}/example/images/users/avatar-5.png">
              <img class="img-avatar img-avatar-48" src="{$xpConfig['web_static']}/example/images/users/avatar-6.png">
              <img class="img-avatar img-avatar-48" src="{$xpConfig['web_static']}/example/images/users/avatar-7.png">
            </div>
          </div>
          <div class="col-md-6">
            <p><strong>头像叠加</strong></p>
            <div class="img-avatar-list img-avatar-list-overlap">
              <img class="img-avatar img-avatar-36" src="{$xpConfig['web_static']}/example/images/users/avatar-1.png" data-toggle="tooltip" title="大娃">
              <img class="img-avatar img-avatar-36" src="{$xpConfig['web_static']}/example/images/users/avatar-2.png" data-toggle="tooltip" title="二娃">
              <img class="img-avatar img-avatar-36" src="{$xpConfig['web_static']}/example/images/users/avatar-3.png" data-toggle="tooltip" title="三娃">
              <img class="img-avatar img-avatar-36" src="{$xpConfig['web_static']}/example/images/users/avatar-4.png" data-toggle="tooltip" title="火娃">
              <img class="img-avatar img-avatar-36" src="{$xpConfig['web_static']}/example/images/users/avatar-5.png" data-toggle="tooltip" title="水娃">
              <img class="img-avatar img-avatar-36" src="{$xpConfig['web_static']}/example/images/users/avatar-6.png" data-toggle="tooltip" title="六娃">
              <img class="img-avatar img-avatar-36" src="{$xpConfig['web_static']}/example/images/users/avatar-7.png" data-toggle="tooltip" title="七娃">
            </div>
            <div class="img-avatar-list img-avatar-list-overlap m-t-10">
              <img class="img-avatar img-avatar-48" src="{$xpConfig['web_static']}/example/images/users/avatar-1.png" data-toggle="tooltip" title="大娃">
              <img class="img-avatar img-avatar-48" src="{$xpConfig['web_static']}/example/images/users/avatar-2.png" data-toggle="tooltip" title="二娃">
              <img class="img-avatar img-avatar-48" src="{$xpConfig['web_static']}/example/images/users/avatar-3.png" data-toggle="tooltip" title="三娃">
              <img class="img-avatar img-avatar-48" src="{$xpConfig['web_static']}/example/images/users/avatar-4.png" data-toggle="tooltip" title="火娃">
              <img class="img-avatar img-avatar-48" src="{$xpConfig['web_static']}/example/images/users/avatar-5.png" data-toggle="tooltip" title="水娃">
              <img class="img-avatar img-avatar-48" src="{$xpConfig['web_static']}/example/images/users/avatar-6.png" data-toggle="tooltip" title="六娃">
              <img class="img-avatar img-avatar-48" src="{$xpConfig['web_static']}/example/images/users/avatar-7.png" data-toggle="tooltip" title="七娃">
            </div>
          </div>
        </div>
        
        <hr/>
        <p>当用户数量太多的时候，可以先隐藏部分用户</p>
        
        <div class="row">
          <div class="col-md-12">
            <div class="img-avatar-list">
              <img class="img-avatar img-avatar-36" src="{$xpConfig['web_static']}/example/images/users/avatar-1.png">
              <img class="img-avatar img-avatar-36" src="{$xpConfig['web_static']}/example/images/users/avatar-2.png">
              <img class="img-avatar img-avatar-36" src="{$xpConfig['web_static']}/example/images/users/avatar-3.png">
              <a class="img-avatar img-avatar-36 img-avatar-more" href="#!">
                <span>+4</span>
              </a>
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</div>